<template>
    <div id="Recruit"></div>
</template>
<style scoped>
#Recruit{
  width: 100%;
  height: calc(100% - 40px);
}

</style>
<script>
import * as echarts from 'echarts';
export default {
  name: 'Energy',
  data () {
    return {
    }
  },
  mounted() {
    this.get_recruit()
    
  },
  methods: {
    // 加载页面时获取
    get_recruit(listDate, listCount){
        console.log("relese father", listDate, listCount)

      var chartDom = document.getElementById('Recruit');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0, 255, 233,0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: {
            top: '15%',
            left: '10%',
            right: '5%',
            bottom: '10%',
            // containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true
            },
            splitArea: {
                // show: true,
                color: '#000',
                lineStyle: {
                    color: '#000'
                },
            },
            axisLabel: {
                color: '#000'
            },
            splitLine: {
                show: false
            },
            axisTick:{//去掉轴刻度
                show: false
            },
            boundaryGap: false,
            data: listDate,

        }],

        yAxis: [{
            type: 'value',
            min: 0,
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLine: {
                show: true,
            },
            axisLabel: {
                show: true,
                formatter: '{value}',
                margin: 20,
                textStyle: {
                    color: '#000',

                },
            },
            axisTick: {
                show: false,
            },
        }],
        series: [
            {
                name: '注册总量',
                type: 'line',
                // smooth: true, //是否平滑
                showAllSymbol: true,
                // symbol: 'image://./static/images/guang-circle.png',
                symbol: 'circle',
                symbolSize: 25,
                lineStyle: {
                    normal: {
                        color: "#00ca95",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#00ca95',
                    }
                },

                itemStyle: {
                    color: "#00ca95",
                    borderColor: "#ddd",
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                tooltip: {
                    show: false
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0,202,149,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0,202,149,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: listCount,
            },
        ]
    };
      option && myChart.setOption(option);
    }
  }
}
</script>